<template>
    <div class="specs_container">
        <transition name="fade">
            <div class="specs_cover" @click="closeView" v-if="food"></div>
        </transition>
        <transition name="fadeBounce">
            <div class="specs_list" v-if="food">
                <header class="specs_list_header">
                    <h4 class="ellipsis">{{food.name}}</h4>
                    <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" version="1.1" 
                        class="specs_cancel" 
                        @click="closeView">
                        <line x1="0" y1="0" x2="16" y2="16"  stroke="#666" stroke-width="1.2"/>
                        <line x1="0" y1="16" x2="16" y2="0"  stroke="#666" stroke-width="1.2"/>
                    </svg>
                </header>
                <section class="specs_list_content">
                    <p class="specs_details_title">{{food.specifications[0].name}}</p>
                    <ul>
                        <li v-for="(item ,index) in food.specifications[0].values" :key="index" @click="changeIdx(index)">
                            <span :class="{specs_activity:index === idx}">{{item}}</span>
                        </li>
                    </ul>
                </section>
                <footer class="specs_list_footer">
                    <span class="specs_price">
                        <span>￥</span>
                        <span>{{price}}</span>
                    </span>
                    <button @click="addSpecs(food.category_id, food.item_id, food.specfoods[idx].food_id, food.specfoods[idx].name, food.specfoods[idx].price, food.specifications[0].values[idx], food.specfoods[idx].packing_fee, food.specfoods[idx].sku_id, food.specfoods[idx].stock)">加入购物车</button>
                </footer>
            </div>
        </transition>
    </div>
</template>

<script>
import {mapActions} from 'vuex'
export default {
    props:{
        food:{
            type:Object,
            default(){return null}      
        },
        shopId:''
    },
    computed:{
        price(){
            return this.food.specfoods[this.idx].price;
        }
    },
    data(){
        return {
            idx:0
        }
    },
    methods:{
        ...mapActions(['addCart']),
        closeView(){
            this.$emit('close');
        },
        //多规格商品加入购物车
        addSpecs(category_id, item_id, food_id, name, price, specs, packing_fee, sku_id, stock){
            this.addCart({shopid: this.shopId, category_id, item_id, food_id, name, price, specs, packing_fee, sku_id, stock});
            this.closeView();
        },
        
        changeIdx(idx){
            this.idx=idx
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~@styl/mixin.scss';
.specs_container{
    .specs_cover{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,.4);
        z-index: 17;
    }
    .specs_list{
        position: fixed;
        top: 35%;
        left: 15%;
        width: 70%;
        background-color: #fff;
        border: 1px;
        border-radius: 0.2rem;
        z-index: 18;
        .specs_list_header{
            position: relative;
            h4{
                @include sc(0.7rem,#333);
                padding: 0.5rem 0;
                text-align: center;
            }
            .specs_cancel{
                @include ct;
                right: 0.5rem;;
            }
        }
        .specs_list_content{
            padding: 0.5rem 0.5rem 0;
            p{
                @include sc(0.6rem,#666);
            }
            ul{
                display: flex;
                margin-top: 0.3rem;
                flex-wrap: wrap;
                li{
                    margin-right: 0.5rem;
                    margin-bottom: 0.5rem;
                    span{
                        @include sc(0.6rem,#333);
                        padding: 0.3rem 0.5rem;
                        border: 0.025rem solid #ccc;
                        border-radius: 0.2rem;
                    }
                    .specs_activity{
                        color: $blue;
                        border-color: $blue;
                    }
                }
            }
        }
        .specs_list_footer{
            margin-top: 1rem;
            padding: 0.6rem 0.5rem;
            background: #f2f2f2;
            border-bottom-left-radius: 0.2rem;
            border-bottom-right-radius: 0.2rem;
            @include fj;
            align-items: center;
            .specs_price{
                font-size: 0;
                span:nth-of-type(1){
                    font-size: 0.5rem;
                    color: #ff6000;
                }
                span:nth-of-type(2){
                    font-size: 0.8rem;
                    font-weight: 700;
                    color: #ff6000;
                }
            }
            button{
                padding: 0.3rem 0.4rem;
                background: $blue;
                color: $fc;
                font-size: 0.6rem;
            }
        }
    }
}
.fade-enter,.fade-leave-to{
    opacity: 0;
}
.fade-enter-active,.fade-leave-active{
    transition: all 0.3;
}
.fadeBounce-enter,.fadeBounce-leave-to{
    transform: translateY(10rem);
    opacity: 0;
}
.fadeBounce-enter-active,.fadeBounce-leave-active{
    transition: all 0.3s ease-in-out;
}
</style>